import {
  FC,
  ReactElement,
  useCallback,
  useState,
  useRef,
  useMemo,
  useEffect,
} from "react";
import styled, { keyframes } from "styled-components";
import { IQRCode } from "../../types";
//@ts-ignore
import QRCode from "qrcode.react";
import { createQRCode, uploadQRCode } from "../../api";
import canvasToFile from "../../api/canvasToFile";
import { previewUrl } from "../../constant/config";

interface IProps {
  data: IQRCode;
}

const GenerateButton: FC<IProps> = ({ data }): ReactElement => {
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);
  const qrcode = useRef(null);
  const [id, setId] = useState("");
  const [qrcodeUrl, setQRCodeUrl] = useState("");
  const qrcodeLink = useMemo(() => `${previewUrl}${id}`, [id]);

  const handleUploadQRCode = useCallback((id) => {
    const { firstChild: canvas }: any = qrcode!.current;
    const file = canvasToFile(canvas, `${id}-QRCODE.png`);
    console.log(file);
    // 发送后端 获得图片地址 供移动端下载 移动端无法下载base64图片
    const formData = new FormData();
    formData.append("image", file);
    uploadQRCode(formData)
      .then((url) => {
        console.log("res", url);
        setLoading(false);
        setQRCodeUrl(url);
      })
      .catch((err) => {
        console.log("err", err);
      });
  }, []);

  useEffect(() => {
    id && handleUploadQRCode(id);
  }, [id, handleUploadQRCode]);

  const handleGenerate = useCallback(() => {
    console.log(data);
    if (!data.title && !data.price && !data.img) {
      alert("不能有空项");
      return;
    }
    setShow((state) => !state);

    if (show) return;
    setLoading(true);
    //信息发送后端 获得数据库中的id项 作为二维码参数
    const formData = new FormData();
    for (const [key, value] of Object.entries(data)) {
      formData.append(key, value as string | File);
    }
    createQRCode(formData)
      .then((id) => {
        console.log(id);
        setId(id);
      })
      .catch((err) => {
        console.error("err", err);
      });
  }, [data, show]);

  const previewPage = useCallback(() => {
    window.open(qrcodeLink, "_blank");
  }, [qrcodeLink]);

  return (
    <Container status={show}>
      <Button onClick={handleGenerate}>
        <Icon />
        生成二维码{loading ? "中" : null}
      </Button>
      <Wrapper>
        <Mask status={loading}>
          <LoadingIcon />
        </Mask>
        <div ref={qrcode}>
          <QRCode value={qrcodeLink} size={240} />
        </div>
        <span style={{ fontSize: "0.5rem" }}>{id}</span>
        <div
          style={{
            display: "flex",
            justifyContent: "space-evenly",
            width: "100%",
          }}
        >
          {/* 移动端无法下载二进制文件 只能返回地址了 */}
          <A href={qrcodeUrl} download={`${id}.png`}>
            <Button>
              <DownloadIcon />
              点击保存
            </Button>
          </A>

          <Button onClick={previewPage}>查看页面</Button>
        </div>
      </Wrapper>
    </Container>
  );
};

export default GenerateButton;

const Container = styled.div`
  width: 100vw;
  height: 100vw;
  position: fixed;
  bottom: ${(props: { status: boolean }) =>
    props.status ? 0 : "calc(3rem - 100vw)"};
  display: flex;
  flex-direction: column;
  transition: all 0.5s ease-out;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  box-shadow: 0 0 3px 2px #cccccc88;
  overflow: hidden;
`;

const Wrapper = styled.div`
  flex: 1;
  background-color: #fff;
  display: flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
`;

const Button = styled.button`
  height: 3rem;
  background-color: #51f;
  border: none;
  outline: none;
  font-size: 1.2rem;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 4px;
  text-shadow: 1px 1px 2px 2px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    margin-right: 7px !important;
    margin-top: 2px !important;
  }
`;

const loadAnimateCss = `
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
`;

const loadAnimate = keyframes`${loadAnimateCss}`;

const Mask = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #11111157;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  translate: all 0.4s linear;
  z-index: ${(props: { status: boolean }) => (props.status ? 0 : -1)};

  svg {
    animation: ${loadAnimate} 2s linear infinite;
  }
`;

const Icon = () => (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="2806"
    width="16"
    height="16"
  >
    <path
      d="M426.666667 554.666667H42.666667a42.666667 42.666667 0 0 1 0-85.333334h384a42.666667 42.666667 0 0 0 42.666666-42.666666V42.666667a42.666667 42.666667 0 0 1 85.333334 0v384a128 128 0 0 1-128 128zM384 256V128a128 128 0 0 0-128-128H128a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h128a128 128 0 0 0 128-128z m0 640v-128a128 128 0 0 0-128-128H128a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h128a128 128 0 0 0 128-128z m384-512h128a128 128 0 0 0 128-128V128a128 128 0 0 0-128-128h-128a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128z m-128 384v128a128 128 0 0 0 128 128h128a128 128 0 0 0 128-128v-128a128 128 0 0 0-128-128h-128a128 128 0 0 0-128 128z m-85.333333 213.333333v-298.666666a42.666667 42.666667 0 0 0-85.333334 0v298.666666a42.666667 42.666667 0 0 0 85.333334 0z m469.333333-469.333333a42.666667 42.666667 0 0 0-42.666667-42.666667h-298.666666a42.666667 42.666667 0 0 0 0 85.333334h298.666666a42.666667 42.666667 0 0 0 42.666667-42.666667z"
      fill="#ffffff"
      p-id="2807"
    ></path>
  </svg>
);
const DownloadIcon = () => (
  <svg
    viewBox="0 0 1170 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="4748"
    width="16"
    height="16"
  >
    <path
      d="M6.095238 0h1024v1024H6.095238z"
      fill="#D8D8D8"
      fillOpacity="0"
      p-id="4749"
    ></path>
    <path
      d="M390.095238 793.002667h256l140.501333-140.501334a42.666667 42.666667 0 0 1 60.330667 0L987.428571 793.002667v170.666666H48.761905v-170.666666l140.501333-140.501334a42.666667 42.666667 0 0 1 60.330667 0L390.095238 793.002667z"
      fill="#ffffff"
      p-id="4750"
      data-spm-anchor-id="a313x.7781069.0.i11"
    ></path>
    <path
      d="M454.095238 543.957333V85.333333h128v458.922667l105.642667-105.642667a64 64 0 1 1 90.538666 90.496L582.095238 725.205333l-0.042667-0.042666V725.333333h-128v-0.384l-196.010666-195.968a64 64 0 0 1 90.538666-90.538666L454.095238 544z"
      fill="#ffffff"
      p-id="4751"
      data-spm-anchor-id="a313x.7781069.0.i12"
    ></path>
    <path
      d="M910.628571 887.466667m-42.666666 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z"
      fill="#5211f5"
      p-id="4752"
      data-spm-anchor-id="a313x.7781069.0.i13"
    ></path>
  </svg>
);

const LoadingIcon = () => (
  <svg
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="5772"
    width="48"
    height="48"
  >
    <path
      d="M1021.269 443.961c-3.186-19.797-7.054-39.367-12.061-58.709-6.371-24.576-14.563-48.925-24.576-72.363-20.253-48.242-48.014-93.298-81.693-133.347-36.409-43.008-80.327-80.099-129.024-108.544-48.014-28.217-100.352-48.242-154.965-59.392-28.217-5.689-56.661-9.102-85.561-9.33-22.528-0.227-45.056 0.683-67.357 2.731-58.027 5.689-115.371 21.845-168.163 46.649-45.283 21.39-87.381 49.152-124.701 82.375-37.319 33.223-69.859 71.907-96.029 114.461-28.899 47.331-50.517 98.987-62.35 153.145-9.557 43.235-14.109 87.837-11.833 132.21 2.048 43.008 8.647 86.016 21.618 127.203 8.192 26.169 17.977 51.655 30.265 76.459 12.061 24.349 26.169 47.787 41.87 69.859 31.403 43.918 69.632 82.83 113.323 114.915 44.601 32.995 94.891 58.482 147.683 75.321 55.069 17.522 113.55 25.714 171.349 23.666 56.434-1.821 112.413-12.743 165.205-32.995 50.745-19.57 98.304-47.559 139.947-82.603 20.935-17.749 39.595-37.774 57.117-58.937 17.749-21.39 33.678-43.918 46.877-68.267 11.378-20.935 20.935-42.781 29.127-64.853 4.096-10.923 7.965-21.845 11.15-33.223 3.413-12.061 5.917-24.576 8.192-36.864 3.413-19.342 4.779-39.367 2.958-58.937-1.593 8.647-2.958 17.067-5.006 25.486-2.503 9.785-5.689 19.342-9.33 28.672-7.282 19.797-16.384 38.912-25.031 58.027-11.15 24.349-24.121 47.559-38.229 70.087-7.282 11.605-14.791 22.983-22.983 33.906-8.192 10.923-17.522 21.39-26.851 31.63-18.659 20.707-38.912 39.139-61.44 55.523-22.983 16.839-47.331 31.63-73.045 43.918-51.427 25.031-107.634 40.05-164.523 45.056-58.254 5.006-117.646-0.683-173.625-17.294-53.248-15.701-103.765-41.187-148.139-74.638-43.008-32.541-80.327-72.59-109.682-117.874-30.72-46.194-51.883-98.304-63.488-152.69-2.958-14.109-5.234-28.672-6.827-43.008-1.365-12.288-2.503-24.803-2.958-37.319-0.683-25.714 0.91-52.338 4.779-77.824 8.419-55.979 26.624-109.909 54.841-159.061 25.031-43.918 57.571-83.513 95.801-116.963 38.229-33.678 81.92-60.757 129.251-79.872 27.307-11.15 55.979-19.342 85.106-24.803 14.791-2.731 29.582-5.006 44.373-6.144 7.282-0.683 14.336-0.683 21.618-1.365 2.958 0 5.917 0.227 8.875 0.227 49.379-0.91 98.987 5.461 146.091 20.253 50.745 15.929 98.531 41.643 139.947 75.093 43.463 35.043 79.645 78.279 106.951 126.976 23.211 41.415 39.822 86.016 49.835 132.437 2.275 10.695 4.096 21.39 5.917 32.085 1.593 9.785 7.054 18.887 15.474 24.349 17.749 11.833 42.553 3.869 51.2-15.246 2.958-6.599 3.869-13.653 2.731-20.253z"
      fill="#ffffff"
      p-id="5773"
    ></path>
  </svg>
);
const A = styled.a``;
